<template>
<view>
  <view class="h-280 bg-red-400 ss-login-banner flex flex-col justify-center text-42 font-bold">
    <view class="pl-32">您好，</view>
    <view class="pl-32">欢迎使用电子工资单！</view>
  </view>
  <view class="rounded-[16rpx] relative z-10 bg-white -mt-16">
    <view class="py-24 pl-32">
      <u-tabs
          :activeStyle="{
              color: '#333333',
              fontWeight: 'bold',
              fontSize: '36rpx',
          }"
          :inactiveStyle="{
              color: '#999999',
              fontWeight: 'bold',
              fontSize: '32rpx',
          }"
          :list="tabList"
          @click="tabClick"
          :lineHeight="0"
      ></u-tabs>
    </view>
    <view class="px-32">
      <u--form
          labelPosition="top"
          :model="model"
          :rules="rules"
          ref="formRef"
      >
        <u-form-item
            label=""
            labelWidth="0"
            prop="userInfo.mobile"
            ref=""
            class="mb-32"
            :borderBottom="true"
        >
          <view class="w-full">
            <view class="mb-16 text-24 text-m-666">手机号</view>
            <view class="flex items-center">
              <img src="@/static/img/phone.png" class="w-48 h-48 mr-8" alt="">
              <u--input
                  v-model="model.userInfo.mobile"
                  border="none"
                  placeholder="请输入手机号码"
                  :maxlength="11"
              ></u--input>
            </view>
          </view>
        </u-form-item>
        <u-form-item
            label=""
            prop="userInfo.code"
            ref=""
            class="mb-32"
            :borderBottom="true"
            v-if="model.userInfo.type == 0"
        >
          <view class="w-full">
            <view class="mb-16 text-24 text-m-666">身份证后6位</view>
            <view class="flex items-center">
              <img src="@/static/img/code.png" class="w-48 h-48 mr-8" alt="">
              <u--input
                  v-model="model.userInfo.code"
                  border="none"
                  placeholder="请输入身份证后6位"
                  :maxlength="6"
              ></u--input>
            </view>
          </view>
        </u-form-item>
        <u-form-item
            label=""
            prop="userInfo.code"
            ref=""
            class="mb-32 "
            :borderBottom="true"
            v-if="model.userInfo.type == 1"

        >
          <view class="w-full">
            <view class="mb-16 text-24 text-m-666 ">验证码</view>
            <view class="flex items-center w-full">
              <img src="@/static/img/code.png" class="w-48 h-48 mr-8" alt="">
              <u-input
                  v-model="model.userInfo.code"
                  border="none"
                  placeholder="验证码"
                  class="w-full"
                  :maxlength="4"
              >
                <template #suffix>
                  <view class="text-[#FF7200] text-30" @tap="getCode" v-if="uCodeRef?.canGetCode">{{tips}}</view>
                  <view class="text-[#999] text-30" v-else>{{tips}}</view>
                </template>
              </u-input>
            </view>
          </view>
        </u-form-item>
      </u--form>

      <view class="pt-160 pb-40">
        <u-button
          type="primary"
          shape="circle"
          @click="submit"
          :customStyle="{
            background: '#FF7200',
            fontSize: '32rpx',
            border: 'none',
            height: '80rpx'
          }"
        ><view class="">登录</view></u-button>
      </view>

    </view>
  </view>
  <u-code :seconds="seconds" @change="codeChange" @end="end" @start="start" ref="uCodeRef"></u-code>
</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {LoginApi} from '@/api'

const tabList = ref([{id: 0, name: '初始密码登录'},{id: 1, name: '验证码登录'},])
const formRef = ref()
const tips = ref('获取验证码');
const seconds = ref(60);
const uCodeRef = ref<any>(null);
const model = ref({
  userInfo: {
    mobile: '',
    code: '',
    type: 0, // 0初始密码登陆，1验证码登陆
  },
})
const rules = ref({
  'userInfo.mobile': [
    {
      type: 'string',
      required: true,
      message: '请输入手机号',
      trigger: ['blur', 'change']
    },
    {
      validator: (rule: any, value: string, callback: any) => {
        console.log(model.value.userInfo.type)
        return uni.$u.test.mobile(value)
      },
      message: '请输入正确的手机号'
    },
  ],
  'userInfo.code': [
    {
      validator: (rule: any, value: string, callback: any) => {
        if (!value) {
          callback(`${model.value.userInfo.type==0?'请输入身份证后6位': '请输入验证码'}`)
        } else {
          callback()
        }
      },
    },
  ]
})

const tabClick = (e: any) => {
  model.value.userInfo.code = ''
  model.value.userInfo.type = e.id
  console.log(e)
}

const codeChange = (text: string) => {
  tips.value = text;
};

const getCode = async () => {
  if (!model.value.userInfo.mobile) return  uni.$u.toast('请输入手机号');
  if ((uCodeRef.value as any).canGetCode) {
    uni.showLoading({
      title: '正在获取验证码',
    });
    await LoginApi.queryLoginCode({mobile: model.value.userInfo.mobile})
    uni.$u.toast('验证码已发送');
    (uCodeRef.value as any).start();
  } else {
  }
};

const end = () => {
  uni.$u.toast('倒计时结束');
};

const start = () => {
  // uni.$u.toast('倒计时开始');
};

const submit = () => {
  formRef.value.validate().then(async () => {
    const res = await LoginApi.wageUserLogin(model.value.userInfo)
    uni.setStorageSync('token', res.token)
    uni.$u.toast('登录成功')
    uni.$u.sleep(1000).then(() => {
      uni.reLaunch({
        url: '/pages/member/wagesList'
      })
    })
  }).catch((error: any) => {
  })
}


</script>


<style scoped lang="scss">
::v-deep .u-tabs__wrapper__nav__item{padding-left: 2px!important; padding-right: 48rpx!important;}
.ss-login-banner{background: url("@/static/img/login-bg.png") no-repeat center center; background-size: cover}
</style>